<template>
  <view class="wanl-comment">
    <view class="edgeInsetTop"></view>
    <view
      class="subject margin-lr-bj bg-white radius-bock margin-bottom-bj"
      v-for="(item, index) in goodsList"
      :key="item.id"
    >
      <view class="goods padding-bj">
        <view
          class="cu-avatar radius-bock"
          :style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image, 40, 40) + ')' }"
        ></view>
        <view class="content">
          <view class="text-lg text-cut">
            <text>{{ item.title }}</text>
          </view>
          <view class="wanl-gray-dark">{{ item.difference }}</view>
        </view>
      </view>
      <view class="comment padding-lr-bj padding-top-bj">
        <view class="comment-title">宝贝评价</view>
        <view class="comment-operate">
          <view class="item" :class="{ action: item.state == 0 }" @tap="stateType(0, index)">
            <text class="wlIcon-haoping"></text>
            好评
          </view>
          <view class="item" :class="{ action: item.state == 1 }" @tap="stateType(1, index)">
            <text class="wlIcon-chaping"></text>
            中评
          </view>
          <view class="item" :class="{ action: item.state == 2 }" @tap="stateType(2, index)">
            <text class="wlIcon-chaping"></text>
            差评
          </view>
        </view>
      </view>
      <view class="describe cu-form-group margin-bj radius-bock padding-bj">
        <textarea maxlength="-1" v-model="item.comment" placeholder="评价下商品~"></textarea>
      </view>
      <view class=""></view>
      <view class="upload cu-form-group padding-lr-bj">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(vo, key) in item.imgList" :key="key" @tap="viewImage(index, key)">
            <image :src="$wanlshop.oss(vo, 40, 40)" mode="aspectFill"></image>
            <view class="cu-tag bg-red" @tap.stop="delImg(index, key)"><text class="wlIcon-31guanbi"></text></view>
          </view>
          <view class="solids" @tap="chooseImage(index)" v-if="item.imgList.length < 4">
            <text class="wlIcon-tupian1"></text>
          </view>
        </view>
      </view>
    </view>
    <view class="operate margin-bj padding-bj bg-white radius-bock" v-if="shop.shopname">
      <view class="operate-title" @tap="onShop(shop.id)">
        <text class="wlIcon-dianpu1 margin-right-sm"></text>
        {{ shop.shopname }}
      </view>
      <view class="score">
        <view class="title">描述相符</view>
        <wanl-rate
          :quantity="5"
          :current="shop.describe"
          :size="25"
          normal="#cad0cc"
          active="#ff4e02"
          :hollow="true"
          @change="describeChange"
        />
        <view class="margin-left wanl-gray-light">
          {{ shop.describeInfo }}
        </view>
      </view>
      <view class="score">
        <view class="title">物流服务</view>
        <wanl-rate
          :quantity="5"
          :current="shop.logistics"
          :size="25"
          normal="#cad0cc"
          active="#ff4e02"
          :hollow="true"
          @change="logisticsChange"
        />
        <view class="margin-left wanl-gray-light">
          {{ shop.logisticsInfo }}
        </view>
      </view>
      <view class="score">
        <view class="title">发货速度</view>
        <wanl-rate
          :quantity="5"
          :current="shop.service"
          :size="25"
          normal="#cad0cc"
          active="#ff4e02"
          :hollow="true"
          @change="serviceChange"
        />
        <view class="margin-left wanl-gray-light">
          {{ shop.serviceInfo }}
        </view>
      </view>
      <view class="score">
        <view class="title">服务态度</view>
        <wanl-rate
          :quantity="5"
          :current="shop.deliver"
          :size="25"
          normal="#cad0cc"
          active="#ff4e02"
          :hollow="true"
          @change="deliverChange"
        />
        <view class="margin-left wanl-gray-light">
          {{ shop.deliverInfo }}
        </view>
      </view>
    </view>
    <view class="edgeInsetBottom"> </view>
    <view class="wanlian cu-bar tabbar foot flex flex-direction"
      ><button @tap="addData()" class="cu-btn wanl-bg-orange lg">发布评论</button></view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      order_id: 0,
      shop: {
        id: 0,
        shopname: '',
        describe: 0,
        describeInfo: '',
        logistics: 0,
        logisticsInfo: '',
        service: 0,
        serviceInfo: '',
        deliver: 0,
        deliverInfo: '',
      },
      goodsList: [],
    };
  },
  onLoad(option) {
    this.loadData(option.order_id);
  },
  methods: {
    async loadData(order_id) {
      this.$api.get({
        url: '/wanlshop/groups/order/getOrderInfo',
        data: {
          id: order_id,
        },
        success: res => {
          this.order_id = res.id;
          this.shop.id = res.shop_id;
          this.shop.shopname = res.shop.shopname;
          var newItems = [];
          res.goods.forEach((item, index) => {
            newItems.push({
              id: item['id'],
              goods_id: item['goods_id'],
              difference: item['difference'],
              image: item['image'],
              title: item['title'],
              imgList: [],
              comment: '',
              state: 0,
            });
          });
          this.goodsList = newItems;
        },
      });
    },
    // 提交评论
    async addData() {
      // 判断是否给店铺评分，其他可以不填写，默认好评
      if (this.shop.describe == 0 || this.shop.logistics == 0 || this.shop.service == 0 || this.shop.deliver == 0) {
        this.$wanlshop.msg('请给店铺评分');
        return false;
      }
      let data = {
        order_id: this.order_id,
        shop: {
          id: this.shop.id,
          describe: this.shop.describe,
          logistics: this.shop.logistics,
          service: this.shop.service,
          deliver: this.shop.deliver,
        },
        goodsList: this.goodsList,
      };
      this.$api.post({
        url: '/wanlshop/groups/order/commentOrder',
        data: data,
        success: res => {
          // this.$store.commit('statistics/order', {
          // 	evaluate: this.$store.state.statistics.order.evaluate - 1
          // });
          this.$wanlshop.to('/pages/page/success?type=comment');
        },
      });
    },
    stateType(type, index) {
      this.goodsList[index].state = type;
    },
    viewImage(index, key) {
      uni.previewImage({
        urls: this.goodsList[index].imgList,
        current: this.goodsList[index].imgList[key],
      });
    },
    delImg(index, key) {
      this.goodsList[index].imgList.splice(key, 1);
    },
    chooseImage(index) {
      uni.chooseImage({
        count: 4, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: res => {
          this.$api.get({
            url: '/wanlshop/common/uploadData',
            success: updata => {
              for (let i = 0; i < res.tempFilePaths.length; i++) {
                // 读取图片宽高
                uni.getImageInfo({
                  src: res.tempFilePaths[i],
                  success: image => {
                    this.$api.upload({
                      url: updata.uploadurl,
                      filePath: image.path,
                      name: 'file',
                      formData: updata.storage == 'local' ? null : updata.multipart,
                      success: data => {
                        this.goodsList[index].imgList.push(data.fullurl);
                      },
                    });
                  },
                });
              }
            },
          });
        },
      });
    },
    describeChange(e) {
      this.shop.describe = e.index;
      this.shop.describeInfo = this.scoreInfo(e.index);
    },
    logisticsChange(e) {
      this.shop.logistics = e.index;
      this.shop.logisticsInfo = this.scoreInfo(e.index);
    },
    serviceChange(e) {
      this.shop.service = e.index;
      this.shop.serviceInfo = this.scoreInfo(e.index);
    },
    deliverChange(e) {
      this.shop.deliver = e.index;
      this.shop.deliverInfo = this.scoreInfo(e.index);
    },
    scoreInfo(index) {
      if (index == 1) {
        return '极差';
      } else if (index == 2) {
        return '差';
      } else if (index == 3) {
        return '一般';
      } else if (index == 4) {
        return '好';
      } else if (index == 5) {
        return '极好';
      }
    },
  },
};
</script>

<style>
.edgeInsetBottom {
  height: 100rpx;
  height: calc(var(--window-bottom) + 100rpx);
}
.wanlian.cu-bar.tabbar {
  background-color: #f7f7f7;
}
.wanlian.cu-bar.tabbar .cu-btn {
  width: calc(100% - 50rpx);
}
.wanlian.cu-bar.tabbar .cu-btn.lg {
  font-size: 32rpx;
  height: 86rpx;
}
</style>
